<template>
  <div>
    <music-list
      :songs="songs"
      :indShow="false"
      :playallShow="false"
    ></music-list>
    <mu-infinite-scroll
      :loadingText="loadingText"
      :loading="loading"
      @load="fetchData"
    />
  </div>
</template>

<script lang="ts">
import musicList from "../../../components/musicList.vue";
import { Vue, Component, Watch } from "vue-property-decorator";
import { MusicInfo } from "@/model/music-info.model";
import { Route } from "vue-router";
import { APIType } from "@/api";
import { SearchType } from "@/model/search-response.model";
@Component({
  components: {
    musicList,
  },
})
export default class SearchResultMusicComponent extends Vue {
  songs: MusicInfo[] = [];
  loading = false;
  loadingText = "努力加载中...";

  $route: Route;
  $api: APIType;

  mounted() {
    this.fetchData();
  }
  // 计算当前搜索的值
  get query() {
    return this.$route.query.val;
  }
  // query变化重新搜索
  @Watch("query")
  private onQueryChange() {
    this.songs = [];
    this.fetchData();
  }
  fetchData() {
    const offset = this.songs.length;
    this.loading = true;
    this.$api
      .searchByType<"Music">(this.$route.query.val, SearchType.Music, offset)
      .then((res) => {
        if (res?.result?.songs?.length) {
          this.songs = [...this.songs, ...res.result.songs];
        }
      })
      .finally(() => (this.loading = false));
  }
}
</script>

<style lang="scss" scoped>
.each-music {
  display: flex;
  margin-left: 0.1rem;
  border-bottom: 1px solid #f9fafc;
  padding: 0.1rem 0;
  .each-music-msg {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    > h3 {
      font-size: 0.2rem;
      font-weight: 400;
    }
    .each-music-artists {
      display: flex;
    }
  }
  .each-music-more {
    width: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.more-msg-mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: black;
  opacity: 0.2;
}
.more-msg {
  animation: myfirst 0.2s ease-in;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f9fafc;
  z-index: 9999;
}
.songs-wrap {
  overflow: hidden;
}
@keyframes myfirst {
  0% {
    height: 0;
  }
  100% {
    height: 4.7rem;
  }
}
</style>
